<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">

    <el-tab-pane label="欢迎" name="first">
      <div class="hello">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
        <h3>Questions with Vite</h3>
      </div>
    </el-tab-pane>

    <el-tab-pane label="面试" name="second">
      <ol>
        <li>办公地点？</li>
        <li>部门名称是？</li>
        <li>前端团队多少人？</li>
        <li class="active">PC端还是移动端？</li>
        <li>to C 还是 to B？</li>
        <li class="active">技术栈是Vue还是React？</li>
        <li class="active">上下班时间？加班情况？</li>
        <li>楼下是否有食堂？</li>
        <br>
        <li class="active">试用期是否足额缴纳五险一金？</li>
        <li class="active">工资是否固定？是否包含绩效？</li>
        <li class="active">与哪家公司签合同？</li>
        <li>是否有补充医疗保险？</li>
        <li>年假有多少天？是否有病假？</li>
        <li>是否有各种补贴？</li>
      </ol>
    </el-tab-pane>

    <el-tab-pane label="租房" name="third">
      <ol>
        <li>房屋面积？</li>
        <li>房屋朝向？</li>
        <li class="active">是否隔断？</li>
        <li>住了几户？</li>
        <li>空调、暖气、洗衣机、微波炉？</li>
        <li class="active">是否可以使用厨房？</li>
        <li>网费多少？</li>
        <li>是否有卫生费？</li>
        <br>
        <li class="active">是否和直接房东签合同？</li>
        <li class="active">是否有超市？</li>
        <li>附近公交车站、地铁站？</li>
      </ol>
    </el-tab-pane>

    <el-tab-pane label="相亲" name="fourth">
      <ol>
        <li>身高与长相？</li>
        <li>性格是否开朗？</li>
        <li>家庭住址？</li>
        <li>兄弟姐妹？</li>
        <li>工作职业？</li>
        <li>有啥兴趣爱好？</li>
        <li>是否自己做饭？</li>
        <br>
        <li class="active">是否有买房打算？</li>
        <li class="active">是否有贷款或负债？</li>
        <li>月消费支出？</li>
        <li>如何理财？</li>
        <li>月储蓄额？</li>
      </ol>
    </el-tab-pane>
  </el-tabs>
</template>

<script setup>
import { ref } from 'vue'
const activeName = ref('first')

const handleClick = (tab) => {
  console.log(tab)
}
</script>



<style scoped lang="scss">
:deep(.el-tabs__content > div) {
  height: calc(100vh - 60px);
  overflow-y: auto;
}

:deep(.el-tabs__item) {
  font-size: 18px;
}

#pane-first {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#pane-first .hello img {
  width: 100px;
}

li {
  line-height: 40px;
  font-size: 16px;
  color: #37474F;

  &.active {
    font-weight: bold;
    color: #D84315;
  }
}
</style>
